@charset "utf-8";

body {
    margin: 0;
}

iframe {
    overflow: hidden;
    width: 100%;
    background-color: transparent;
    border: none;
}

.chart-layout {
    overflow: hidden;
    transition: all 0.6s;
    border-radius: 6px;
    transform: scale(0.9);
}

.chart-layout:hover {
    box-shadow: 0 0 12px rebeccapurple;
    transform: scale(1);
}

.charts-container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto 112px max-content;
    grid-template-areas:
        ". ."
        ". ."
        "skyline skyline"
        "timeline timeline";
    background-color: #0d1117;
    padding: 20px;
}

.skyline {
    grid-area: skyline;
    width: 690px;
    height: 112px;
    justify-self: center;
}

.timeline {
    grid-area: timeline;
    width: calc(100% - 20px);
}

/* 
.chart-layout:nth-child(2) {
    max-width: 500px;
}

.chart-layout:nth-child(3) {
    max-width: 390px;
}

.chart-layout:nth-child(4) {
    max-width: 660px;
} 
*/
